<template>
  <view class="address">
    <tm-segtab :width="636" :list="list" default-value="1"></tm-segtab>

    <view class="takeaway item">
      <view class="ul">
        <view v-for="(item, index) in address.list" :key="index" class="li">
          <view class="lable"
            ><text class="txt">{{ item.lable }}</text></view
          >
          <input
            v-model="address.formData[item.prop]"
            type="text"
            class="input"
          />
        </view>

        <view class="qt-address">
          <text>其他收货地址</text>
          <my-icon name="icon-xiangyou1"></my-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
} from 'vue'
import myIcon from '@/components/icon/src/font/my-icon.vue'
const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: '',
  },
})
//const { } = toRefs(props);

const list = ref([
  { text: '外卖配送', id: '1' },
  { text: '到点自取', id: '2' },
])

const address = reactive({
  list: [
    {
      lable: '地址',
      prop: 'address',
    },
    {
      lable: '门牌号',
      prop: 'detailedAddress',
    },
    {
      lable: '收货人',
      prop: 'name',
    },
    {
      lable: '手机号',
      prop: 'phone',
    },
  ],

  formData: {
    address: '泉州经贸职业技术学院',
    detailedAddress: '学生宿舍楼4栋101',
    name: 'cv法师',
    phone: 17772795647,
  },
})

const { data } = toRefs(
  reactive({
    //定义数组和对象
    data: '',
  })
)
</script>
<style lang="scss" scoped>
.address {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: 20rpx 0;

  border-radius: 20rpx;

  .takeaway {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.85rem;

    .ul {
      width: 90%;

      .li {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;

        .lable {
          width: 150rpx;

          .txt {
            font-weight: 700;
          }
        }

        .input {
          font-weight: 700;
        }
      }

      .qt-address {
        width: 100%;
        display: flex;
        justify-content: center;
        color: #989898;
      }
    }
  }
}
</style>
